<html>
<head>  

<style type="text/css">

.scrollview {
    margin: 100px 200px;
    position:relative;
    overflow:hidden;
    width:448px;
    height:400px;
    background-color:black;
}

.scrollviewcontent {
    position:absolute;
    top:0px;
    left:0px;
    width:4000px;
    height:4073px;
    background-color:gray;
    background-image:url(test.jpg);
}

body {
    background-color: gray;
}

</style>

<script type="text/javascript" language="javascript" src="LinearScroller.js" ></script>
<script type="text/javascript" language="javascript">

var timer = null;
var lastTime = 0;
var vls = new LinearScroller(400, 4073);
var hls = new LinearScroller(448, 4000);

function onMouseDown() {
    vls.start(event.screenY);
    hls.start(event.screenX);
}

function onMouseMove() {
    vls.move(event.screenY);
    hls.move(event.screenX);
}

function onMouseUp() {
    vls.finish();
    hls.finish();
}

function getDt() {
    var now = Date.now();
    if (lastTime == 0) {
        lastTime = now;
        return;
    }
    var dt = (now - lastTime) / 1000.0;
    lastTime = now;
    return dt;
}

function update() {
    var dt = getDt();

    vls.update(dt);
    hls.update(dt);

    var c = document.getElementById("thescrollviewcontent");
    c.style.top = Math.round(vls.offset) + 'px'; 
    c.style.left = Math.round(hls.offset) + 'px'; 
}

setInterval("update()", 20);

</script>

</head>

<body>

<div id="thescrollview" class="scrollview">
    <div id="thescrollviewcontent" class="scrollviewcontent"
    onmousedown="onMouseDown();" 
    onmouseup="onMouseUp();"
    onmouseout="onMouseUp();"
    onmousemove="onMouseMove();">
    </div>
</div>  

</body>
